<template>
	<view class="imageText">
		<!-- <image src="https://zlk.studylike.top/icon/down/000.jpg" mode="widthFix"></image>
		<image src="https://zlk.studylike.top/icon/down/001.jpg" mode="widthFix"></image>
		<image src="https://zlk.studylike.top/icon/down/002.jpg" mode="widthFix"></image>
		<image src="https://zlk.studylike.top/icon/down/003.jpg" mode="widthFix"></image>
		<image src="https://zlk.studylike.top/icon/down/006.jpg" mode="widthFix" @click="handleDown"></image>
		<image src="https://zlk.studylike.top/icon/down/004.jpg" mode="widthFix"></image>
		<image src="https://zlk.studylike.top/icon/down/005.png" mode="widthFix"></image> -->
		<image :src="activeSystemData.app_use_image" mode="widthFix" class="img"></image>
		<view class="download">
			<view class="tabs"><u-tabs :list="list" @click="changeType" :activeStyle="{color: '#126efd'}"
					:itemStyle="{width:'40%',height:'80rpx'}"></u-tabs></view>
			<view class="f fd-c ai-c" v-show="curt==0">
				<view class="wx-tip">
					下载文件，发送到微信文件传输助手
				</view>
				<image src="../../static/wx-download.png" class="wx-img"></image>
				<view class="wx-btn f ai-c jc-c" @click="handleDown">
					<image src="../../static/wx.png"></image>下载到微信
				</view>
			</view>
			<view v-show="curt==1" class="pc">
				<view class="tip f ai-c">
					<view class="num">1.</view>
					<view>复制下载地址</view>
				</view>
				<view class="tip f ai-c">
					<view class="num">2.</view>
					<view>在任意浏览器粘贴下载</view>
				</view>
				<view class="url">{{systemData.pc_download_url}}</view>
				<view class="wx-btn f ai-c jc-c" @click="handleCopy">
					复制链接
				</view>
			</view>
		
		</view>
		<image :src="activeSystemData.app_use_image_02" mode="widthFix" class="img"></image>

	</view>
</template>

<script>
	export default {
		data() {
			return {
list: [{
					name: '下载到微信',
				}, {
					name: '传输到电脑',
				}],
				curt: 0,
				tempFilePath:null
			}
		},
		computed: {
			activeSystemData() {
				return this.$store.state.activeSystemData
			},
			systemData() {
				return this.$store.state.systemData
			},
		},
		onShareAppMessage(res) {
			// 来自页面内转发按钮
			return {
				title: this.activeSystemData.app_share_desc,
				path: `/pages/pdf/imageText`,
				imageUrl: this.activeSystemData.app_share_image
			};

		},
		onShow() {
			uni.downloadFile({
				url: this.systemData.pc_download_url,
				success: res => {
					if (res.statusCode === 200) {
						this.tempFilePath=res.tempFilePath
					}
				}
			})
		},
		methods: {
			changeType(e) {
				this.curt = e.index
			
			},
			handleCopy() {
				uni.setClipboardData({
					data: this.systemData.pc_download_url, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			handleDown() {
				console.log(this.systemData.pc_download_url.lastIndexOf("."))
				const lastSlashIndex = this.systemData.pc_download_url.lastIndexOf("/");
				const fileName = this.systemData.pc_download_url.substring(lastSlashIndex + 1);
				if(this.tempFilePath){
					uni.shareFileMessage({
						filePath: this.tempFilePath,
						fileName:  fileName
					})
				}else{
					uni.showToast({
						title:'请稍后，下载中...',
						icon:'none'
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.download {
		.pc {
			margin-top: 100rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
		}
	
		.url {
			width: 100%;
			padding: 32rpx 48rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			border: 1px solid #126efd;
			border-radius: 24rpx;
			background: #f9fafe;
			color: #126efd;
			text-align: center;
			margin-top: 32rpx;
			word-wrap: break-word;
		}
	
		.tip {
			font-size: 28rpx;
			margin-bottom: 16rpx;
	
			.num {
				font-size: 32rpx;
				color: #126efd;
				font-weight: 800;
				margin-right: 4rpx;
			}
		}
	
		.wx-tip {
			font-size: 30rpx;
			margin-top: 100rpx;
		}
	
		.wx-img {
			width: 700rpx;
			height: 350rpx;
			margin-top: 32rpx;
		}
	
		.wx-btn {
			width: 500rpx;
			height: 80rpx;
			background: #126efd;
			border-radius: 16rpx;
			color: #fff;
			font-size: 28rpx;
			margin: 68rpx auto 0 auto;
	
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	
		.tabs {
			width: 100%;
		}
	}
	.wx-btn {
		width: 500rpx;
		height: 80rpx;
		background: #126efd;
		border-radius: 16rpx;
		color: #fff;
		font-size: 28rpx;
		margin: 68rpx auto 68rpx auto;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
	}

	.imageText {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.img {
			width: 100%
		}
	}
</style>